<%--
  Created by IntelliJ IDEA.
  User: wuyukai
  Date: 2021/11/12
  Time: 6:15 下午
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<!DOCTYPE html>
<html lang="zh-CN">
<%@ include file="/WEB-INF/include-head.jsp"%>
<script type="text/javascript" src="jquery/jquery.pagination.js"></script>
<script type="text/javascript" src="crowd/my-role.js"></script>
<script type="text/javascript">
    $(function () {
        window.pageNum = "1";
        window.pageSize = "5";
        window.keyword = "";
        generatePage();
        // 模糊查询
        $("#selectByKeyword").click(function () {
            window.keyword = $("#keyword").val();
            // 增加这一行是为了在模糊查询时第一次查询在某一页而第二次查询时不能回到第一页的错误
            window.pageNum = "1";
            generatePage();

        });
        // 点击新增按钮弹出添加角色的模态弹框
        $("#roleSaveBtn").click(function () {
            $("#saveRoleModel").modal("show");
        });
        // 点击模态弹框的保存按钮发送ajax请求
        $("#saveBtn").click(function () {
            var roleName = $.trim($("#saveRoleModel [name=roleName]").val());
            $.ajax( {
                "url" : "/role/save/to/info.json",
                "type" : "post",
                "data" : {"roleName":roleName},
                "dataType" : "json",
                "success" : function (response) {
                    var result = response.result;
                    if (result == "SUCCESS") {
                        layer.msg("增加角色成功！");
                    }
                    if (result == "FAILED") {
                        layer.msg("操作失败" + response.message)
                    }
                },
                "error" : function (response) {
                    layer.msg(response.status+" "+response.statusText);
                }

            })
            $("#saveRoleModel").modal("hide");
            // 清理模态框
            $("#saveRoleModel [name=roleName]").val("");
        });

        // 翻页之后绑定不了事件
        // 得使用jQuery对象的on()函数
        // 首先找到所有动态生成的元素附着的静态元素
        $("#rolePageBody").on("click",".pencilBtn",function () {
            var roleId = $(this).val();
            var ajaxResult = $.ajax({
                "url" : "role/selectById/info.json",
                "type" : "post",
                "async" : false,
                "data" : {
                    "roleId" : roleId
                },

                "dataType" : "json"
            });
            console.log(ajaxResult);
            // 判断当前响应状态码是否为200
            var statusCode = ajaxResult.status;
            // 如果报错，弹出报错信息
            if (statusCode != 200) {
                layer.msg("响应状态码="+statusCode+"  报错信息="+ajaxResult.statusText);
            }
            // 不报错则拿到JSON数据
            var resultEntity = ajaxResult.responseJSON;
            var result = resultEntity.result;
            // 判断是否成功
            if (result == "FAILED") {
                layer.msg(resultEntity.message);
                return null;
            }
            // 成功后取到Role
            var role = resultEntity.data;
            $("#editRoleModel [name=roleName]").val(role.name);
            $("#updateBtn").val(role.id);
            $("#editRoleModel").modal("show");
        });
        // $("#rolePageBody [name=edit]").click(function () {
        //     var roleId = $(this).val();
        //     var ajaxResult = $.ajax({
        //         "url" : "role/selectById/page.json",
        //         "type" : "post",
        //         "async" : false,
        //         "data" : {
        //             "roleId" : roleId
        //         },
        //
        //         "dataType" : "json"
        //     });
        //     console.log(ajaxResult);
        //     // 判断当前响应状态码是否为200
        //     var statusCode = ajaxResult.status;
        //     // 如果报错，弹出报错信息
        //     if (statusCode != 200) {
        //         layer.msg("响应状态码="+statusCode+"  报错信息="+ajaxResult.statusText);
        //     }
        //     // 不报错则拿到JSON数据
        //     var resultEntity = ajaxResult.responseJSON;
        //     var result = resultEntity.result;
        //     // 判断是否成功
        //     if (result == "FAILED") {
        //         layer.msg(resultEntity.message);
        //         return null;
        //     }
        //     // 成功后取到Role
        //     var role = resultEntity.data;
        //     $("#editRoleModel [name=roleName]").val(role.name);
        //     $("#updateBtn").val(role.id);
        //     $("#editRoleModel").modal("show");
        // });
        // 对选择的角色进行修改
        $("#updateBtn").click(function () {
            var id = $(this).val();
            var roleName = $("#editRoleModel [name=roleName]").val();
            $.ajax({
                "url" : "role/updateById/info.json",
                "type" : "post",
                "data" : {
                    "id" : id,
                    "roleName":roleName
                },
                "dataType" : "json",
                "success" : function (response) {
                    var result = response.result;
                    if (result == "SUCCESS") {
                        layer.msg("角色修改成功！");
                        // 角色修改成功再刷新页面获得分页
                        generatePage();
                    }
                    if (result == "FAILED ") {
                        layer.msg("角色修改失败！"+response.message);
                    }
                },
                "error" : function (response) {
                    layer.msg(response.status+" "+response.statusText);
                }
            })
            $("#editRoleModel [name=roleName]").val("");
            $("#editRoleModel").modal("hide");

        });
        // 弹出删除模态框
        $("#rolePageBody").on("click",".removeBtn",function () {
            $("#deleteDiv").empty();
            var roleIds =$(this).val();
            // var arrayRoleIds = JSON.stringify(roleIds)
            var ajaxResult = $.ajax({
                url : "role/selectByIds/info.json",
                type : "post",
                data : {
                    "roleId" : roleIds
                },
                async : false,
                dataType : "json"
            });
            console.log(ajaxResult);
            var statusCode = ajaxResult.status;
            if (statusCode != 200) {
                layer.msg("响应状态码："+statusCode+"  响应信息："+ajaxResult.statusText);
            }
            var resultEntity = ajaxResult.responseJSON;
            var result = resultEntity.result;
            var json = "";
            var html="";
            if (result == "SUCCESS") {
                var array = resultEntity.data;
                 for (var i =0; i < resultEntity.data.length ; ++i) {
                     var name = array[i].name;
                     html += "<input type='text' name='roleName' class='form-control' value='"+name+"' autofocus>";

                     json += resultEntity.data[i].id+",";
                 }
                 var j = JSON.stringify(json);
                 $("#deleteDiv").append(html);
                $("#deleteBtn").val(json);
                $("#deleteRoleModel").modal("show");
            }else {
                layer.msg("请求失败！失败原因："+resultEntity.message);
                return;
            }
        });
        // 对选择的角色进行删除,多选单选均可用
        $("#deleteBtn").click(function () {
            var roleIds = $("#deleteBtn").val();
            $.ajax({
                url : "role/deleteByIds/info.json",
                data : {
                    "roleId" :roleIds
                },
                type : "post",
                dataType : "json",
                success : function (response) {
                    var result = response.result;
                    if (result == "SUCCESS") {
                    layer.msg("角色删除成功！");
                        generatePage();
                    }
                    if (result == "FAILED") {
                        layer.msg("角色删除失败！失败原因："+response.message);
                    }
                },
                error : function (response) {
                    layer.msg("角色删除失败！响应状态码："+response.status+"  响应消息："+response.statusText)
                }
            });
            $("#deleteRoleModel").modal("hide");

        })
        // 全选、全不选操作
       $("#checkAll").click(function () {
            $("input[name=allCheckbox]").prop("checked",this.checked);
       });
        // 反向全不选、全选操作
        $("#rolePageBody [name=allCheckbox]").on("click",$("input[name=allCheckbox]"),function () {
           $("#checkAll").prop("checked",$("input[name=allCheckbox]").length == $("input[name=allCheckbox] :checked").length);

        });
        // 多条角色删除操作弹出删除框
        $("#deletesBtn").click(function () {
            $("#deleteDiv").empty();
            if ($("input[name=allCheckbox]:checked").length==0){
                layer.msg("请选择至少一条删除角色！");
            }else{
            var $allCheckbox = $("input[name=allCheckbox]:checked");
            var prom = "";
            for (var i = 0 ; i <$allCheckbox.length ; i++ ) {
                prom+=$allCheckbox[i].id+",";
            };
            var ajaxResult = $.ajax({
                url : "role/selectByIds/info.json",
                data : {"roleId":prom},
                type : "post",
                datatype : "json",
                async : false
                });
            console.log(ajaxResult);
            var status = ajaxResult.status;
            if (status != 200) {
                layer.msg("响应状态码："+status+"  响应信息："+ajaxResult.statusText);
            }
            var resultEntity = ajaxResult.responseJSON;
            var result = resultEntity.result;
            if (result == "FAILED") {
                layer.msg("请求失败！失败原因："+resultEntity.message);
                return;
            };
            var html=""
            var roleId=""
            for (var i = 0 ; i < resultEntity.data.length ; i++) {
                roleId+=resultEntity.data[i].id+",";
                html+="<input type='text' value='"+resultEntity.data[i].name+"' name='roleName' class='form-control' autofocus>"
            }
            $("#deleteDiv").append(html);
            $("#deleteBtn").val(roleId);
            $("#deleteRoleModel").modal("show");
            }
        });
    });
</script>

<body>

<%@ include file="/WEB-INF/include-nav.jsp"%>

<div class="container-fluid">
    <div class="row">
        <%@ include file="/WEB-INF/include-sidebar.jsp"%>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title"><i class="glyphicon glyphicon-th"></i> 数据列表</h3>
                </div>
                <div class="panel-body">
                    <form class="form-inline" role="form" style="float:left;">
                        <div class="form-group has-feedback">
                            <div class="input-group">
                                <div class="input-group-addon">查询条件</div>
                                <input id="keyword" class="form-control has-success" type="text" placeholder="请输入查询条件">
                            </div>
                        </div>
                        <button type="button" id="selectByKeyword" class="btn btn-warning"><i class="glyphicon glyphicon-search"></i> 查询</button>
                    </form>
                    <button type="button" id="deletesBtn" class="btn btn-danger" style="float:right;margin-left:10px;"><i class=" glyphicon glyphicon-remove"></i> 删除</button>
                    <button type="button" id="roleSaveBtn" class="btn btn-primary" style="float:right;" ><i class="glyphicon glyphicon-plus"></i> 新增</button>
                    <br>
                    <hr style="clear:both;">
                    <div class="table-responsive">
                        <table class="table  table-bordered">
                            <thead>
                            <tr >
                                <th width="30">#</th>
                                <th width="30"><input id="checkAll" type="checkbox"></th>
                                <th>名称</th>
                                <th width="100">操作</th>
                            </tr>
                            </thead>
                            <tbody id="rolePageBody">
                            </tbody>
                            <tfoot>
                            <tr>
                                <td colspan="6" align="center">
                                    <div id="Pagination" class="pagination"><!-- 这里显示分页 --></div>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<%@ include file="/WEB-INF/model-role-save.jsp"%>
<%@ include file="/WEB-INF/model-role-edit.jsp"%>
<%@ include file="/WEB-INF/model-role-delate.jsp"%>
</body>
</html>

